import { h, render } from 'vue'
import filter from './filter.vue'

const alert = ({ title, type, duration, callback, el }) => {
    // 创建渲染容器
    const div = document.createElement('div')
    div.className = 'el-message'
    div.style.cssText = 'padding: 0;width:50%;z-index:999'

    // 将渲染容器添加到body
    el = el || document.querySelector('body')
    el.appendChild(div)

    // 渲染到容器内
    render(h(filter, {
        title,
        type,
        onClose: () => {
            el.removeChild(div)
        },
        onConfirm: (list) => {
            if (typeof callback === 'function') callback(list)
        }
    }), div);

    if (duration) {
        setTimeout(() => {
            el.contains(div) && el.removeChild(div)
        }, duration);
    }
}
export default alert